<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="meta description">

    <title>商品列表</title>

    <!--=== Favicon ===-->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/img/logo/favicon.ico"
          type="image/x-icon"/>

    <!--== Google Fonts ==-->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">

    <!--=== Bootstrap CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/bootstrap.min.css" rel="stylesheet">
    <!--=== Font-Awesome CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/vendor/font-awesome.css" rel="stylesheet">
    <!--=== Plugins CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/plugins.css" rel="stylesheet">
    <!--=== Helper CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/helper.min.css" rel="stylesheet">
    <!--=== Main Style CSS ===-->
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=1.01" rel="stylesheet">

    <!-- Modernizer JS -->
    <script src="${pageContext.request.contextPath}/static/js/vendor/modernizr-2.8.3.min.js"></script>


    <!--[if lt IE 9]>
    <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<%--header--%>
<jsp:include page="../head.jsp"/>

<!--== Start Page Breadcrumb ==-->
<div class="page-breadcrumb-wrap">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-breadcrumb">
                    <ul class="nav">
                        <li><a href="${pageContext.request.contextPath}/index.do">Home</a></li>
                        <li><a href="shop.html" class="active">Shop</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--== End Page Breadcrumb ==-->

<!--== Page Content Wrapper Start ==-->
<div id="page-content-wrapper">
    <div class="container">
        <div class="row">
            <!-- Sidebar Area Start -->
            <div class="col-lg-3">
                <div id="sidebar-area-wrap">
                    <!--我的收藏 -->
                    <c:if test="${not empty collect}">
                        <div class="single-sidebar-wrap">
                            <h2 class="sidebar-title">我的收藏</h2>
                            <div class="sidebar-body">
                                <div class="product-small-list">
                                    <c:forEach items="${collect}" var="item" varStatus="s">
                                        <!-- Single Product Start -->
                                        <c:if test="${s.count <=3}">
                                            <div class="single-pro-item d-flex">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="product-thumb">
                                                    <img style="width: 80px;height: 80px;" src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"/>
                                                </a>
                                                <div class="pro-details">
                                                    <h2>
                                                        <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                            <c:if test="${fn:length(item.name) > 12}">
                                                                ${fn:substring(item.name,0 ,12 )}...
                                                            </c:if>
                                                            <c:if test="${fn:length(item.name) <= 12}">
                                                                ${item.name}
                                                            </c:if>
                                                        </a>
                                                    </h2>
                                                    <span class="pro-price">$${item.shelfPrice}</span>
                                                </div>
                                            </div>
                                        </c:if>
                                        <!-- Single Produt End -->
                                    </c:forEach>
                                </div>
                            </div>
                        </div>
                    </c:if>
                    <!-- Single Sidebar Item End -->
                    <!-- 销售最多 -->
                    <div class="single-sidebar-wrap">
                        <h2 class="sidebar-title">热销产品</h2>
                        <div class="sidebar-body">
                            <div class="sidebar-product-carousel owl-carousel">
                                <div class="sidebar-carousel-item">
                                    <div class="product-small-list">
                                        <c:forEach items="${hots}" var="item">
                                            <!-- Single Product Start -->
                                            <div class="single-pro-item d-flex">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="product-thumb">
                                                    <img style="width: 80px;height: 80px;" src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"/>
                                                </a>
                                                <div class="pro-details">
                                                    <h2>
                                                        <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                            <c:if test="${fn:length(item.name) > 12}">
                                                                ${fn:substring(item.name,0 ,12 )}...
                                                            </c:if>
                                                            <c:if test="${fn:length(item.name) <= 12}">
                                                                ${item.name}
                                                            </c:if>
                                                        </a>
                                                    </h2>
                                                    <span class="pro-price">$${item.shelfPrice}</span>
                                                </div>
                                            </div>
                                            <!-- Single Product End -->
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Single Sidebar Item End -->
                </div>
            </div>
            <!-- Sidebar Area End -->
            <!-- 商品列表 -->
            <div class="col-lg-9 order-first order-lg-last">
                <div class="shop-page-content-wrap">
                    <div class="products-settings-option d-block d-md-flex">
                        <div class="product-cong-left d-flex align-items-center">
                            <ul class="product-view d-flex align-items-center">
                                <li class="box-gird current"><i class="fa fa-th"></i></li>
                                <li class="list"><i class="fa fa-list-ul"></i></li>
                            </ul>
                            <%--<span class="show-items">Items 1 - 9 of 17</span>--%>
                        </div>
                    </div>

                    <div class="shop-page-products-wrap">
                        <div class="products-wrapper">
                            <div class="row">

                                <c:forEach items="${pagemodel.list}" var="item">
                                    <!-- Single Product Start -->
                                    <div class="col-lg-4 col-sm-6">
                                        <div class="single-product-item">
                                            <figure class="product-thumb">
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                    <img class="FixHw"
                                                         src="${pageContext.request.contextPath}/${item.imgs}"
                                                         alt="Product"></a>
                                                <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}"
                                                   class="btn btn-round btn-cart" title="Quick View"><i
                                                        class="fa fa-eye"></i></a>
                                            </figure>
                                            <div class="product-details">
                                                <h2 class="product-title">
                                                    <a href="${pageContext.request.contextPath}/product/displaymsg.do?pid=${item.pid}">
                                                        <c:if test="${fn:length(item.name) > 12}">
                                                            ${fn:substring(item.name,0 ,12 )}..
                                                        </c:if>
                                                        <c:if test="${fn:length(item.name) <= 12}">
                                                            ${item.name}
                                                        </c:if>
                                                    </a></h2>
                                                <div class="rating"> <!-- 星级 -->
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                </div>
                                                <span class="product-price">$${item.shelfPrice}</span>

                                                <p class="pro-desc">
                                                        ${item.detail}
                                                </p>

                                                <div class="product-meta">
                                                    <a href="javascript:;" onclick="addcart('${item.pid}')" class="btn btn-round btn-cart addcar"
                                                       title="Add to Cart"><i
                                                            class="fa fa-shopping-cart"></i></a>
                                                    <c:if test="${item.state == '1'}">
                                                        <c:if test="${item.isCollect == true}">
                                                            <a href="javascript:void(0);" onclick="updateCollect(this,'${item.pid}')"
                                                               class="btn btn-round  btn-wish">
                                                                <i class="fa fa-heart"></i></a>
                                                        </c:if>
                                                        <c:if test="${item.isCollect == false}">
                                                            <a href="javascript:void(0);" onclick="updateCollect(this,'${item.pid}')"
                                                               class="btn btn-round  btn-nowish">
                                                                <i class="fa fa-heart"></i></a>
                                                        </c:if>
                                                    </c:if>

                                                    <c:if test="${item.state == '0'}">
                                                        <c:if test="${item.isCollect == true}">
                                                            <a href="javascript:void(0);" onclick="soldOut()"
                                                               class="btn btn-round  btn-wish">
                                                                <i class="fa fa-heart"></i></a>
                                                        </c:if>
                                                        <c:if test="${item.isCollect == false}">
                                                            <a href="javascript:void(0);" onclick="soldOut()"
                                                               class="btn btn-round  btn-nowish">
                                                                <i class="fa fa-heart"></i></a>
                                                        </c:if>
                                                    </c:if>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Single Product End -->
                                </c:forEach>
                            </div>
                        </div>
                    </div>

                    <!-- 分页暂时未动 -->
                    <div class="products-settings-option d-block d-md-flex" style="min-height: 65px;">
                        <c:if test="${pagemodel.totalPages > 1}">
                            <c:if test="${pagemodel.totalPages < 4 && pagemodel.totalPages > 1}">

                                <nav class="page-pagination">
                                    <ul class="pagination">
                                        <li>
                                            <a href="${pageContext.request.contextPath}/product/list.do?pageid=${pagemodel.prePage}&cid=${cid}"
                                               aria-label="Previous">&laquo;</a></li>
                                        <c:forEach begin="${pagemodel.navigateFirstPage}"
                                                   end="${pagemodel.navigateLastPage}" var="i">
                                            <c:if test="${pagemodel.page != i}">
                                                <li>
                                                    <a href="${pageContext.request.contextPath}/product/list.do?pageid=${i}&cid=${cid}">${i}</a>
                                                </li>
                                            </c:if>
                                            <c:if test="${pagemodel.page != i}">
                                                <li><a class="current"
                                                       href="${pageContext.request.contextPath}/product/list.do?pageid=${i}&cid=${cid}">${i}</a>
                                                </li>
                                            </c:if>
                                        </c:forEach>
                                        <li>
                                            <a href="${pageContext.request.contextPath}/product/list.do?pageid=${pagemodel.nextPage}&cid=${cid}"
                                               aria-label="Next">&raquo;</a></li>
                                    </ul>
                                </nav>

                            </c:if>
                            <c:if test="${pagemodel.totalPages > 4}">

                                <nav class="page-pagination">
                                    <ul class="pagination">
                                        <li><a href="#" aria-label="Previous">&laquo;</a></li>
                                        <li><a class="current" href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#" aria-label="Next">&raquo;</a></li>
                                    </ul>
                                </nav>
                            </c:if>
                        </c:if>
                    </div>
                </div>
            </div>
            <!-- End Shop Page Content -->
        </div>
    </div>
</div>
<!--== Page Content Wrapper End ==-->
<!--== foot ==-->
<jsp:include page="../foot.jsp"/>
<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->
<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-3.3.1.min.js"></script>
<%--Jquery Fly Min Js--%>
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery.fly.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="${pageContext.request.contextPath}/static/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="${pageContext.request.contextPath}/static/js/plugins.js"></script>
<!--=== product And store Js ===-->
<script src="${pageContext.request.contextPath}/static/js/product.js"></script>
<script src="${pageContext.request.contextPath}/static/js/api/store.js"></script>
<!--=== Active Js ===-->
<script src="${pageContext.request.contextPath}/static/js/active.js"></script>
</body>
<%--<script>--%>
    <%--var user = "<%=session.getAttribute("user")%>";--%>

    <%--if (user != null) {--%>
        <%--$(".addcar").click(function (event) {--%>
            <%--var offset = $("#fly-end").offset();--%>
            <%--var addcar = $(this);--%>
            <%--var img = $(".img-pro").attr('src');--%>
            <%--var flyer = $('<img class="u-flyer" src="' + img + '">');--%>
            <%--flyer.fly({--%>
                <%--start: {--%>
                    <%--left: event.pageX,--%>
                    <%--top: event.pageY--%>
                <%--},--%>
                <%--end: {--%>
                    <%--left: offset.left,--%>
                    <%--top: offset.top,--%>
                    <%--width: 0,--%>
                    <%--height: 0--%>
                <%--},--%>
                <%--onEnd: function () {--%>
                    <%--$("#msg").show().animate({width: '250px'}, 200).fadeOut(500);--%>
                    <%--this.destory();--%>
                <%--}--%>
            <%--});--%>
        <%--});--%>
    <%--}--%>

    <%--function add2cart() {--%>
        <%--if (user == null) {--%>
            <%--prompt("you didn't login,went login");--%>
            <%--window.setTimeout(function () {--%>
                <%--window.location.href = "${pageContext.request.contextPath}/user/gotologin.do";--%>
            <%--}, 1000);--%>
        <%--} else {--%>
            <%--$.ajax({--%>
                <%--url: "${pageContext.request.contextPath}/car/add2cart.do",--%>
                <%--type: "post",--%>
                <%--data: {--%>
                    <%--pid: $("#pid").val(),--%>
                    <%--count: $("#quantity").val()--%>
                <%--},--%>
                <%--success: function (d) {--%>
                    <%--if (d.status == 1) {--%>
                        <%--location.href = "${pageContext.request.contextPath}/user/gotomsg.do?msg=" + d.data.msg--%>
                            <%--+ "&address=" + d.data.address;--%>
                    <%--}--%>
                    <%--if (d.status == 0) {--%>

                        <%--&lt;%&ndash;prompt("正在前往购物车", 900);&ndash;%&gt;--%>
                        <%--&lt;%&ndash;var c = 1;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;window.setInterval(function () {&ndash;%&gt;--%>
                        <%--&lt;%&ndash;c--;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;if (c == 0) {&ndash;%&gt;--%>
                        <%--&lt;%&ndash;location.href = "${pageContext.request.contextPath}/car/showcar.do";&ndash;%&gt;--%>
                        <%--&lt;%&ndash;}&ndash;%&gt;--%>
                        <%--&lt;%&ndash;}, 1000);&ndash;%&gt;--%>

                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--}--%>
    <%--}--%>

    <%--function updateCollect(data,pid) {--%>
        <%--var _this = $(data);--%>
        <%--if (user == null) {--%>
            <%--prompt("you didn't login,went login");--%>
            <%--window.setTimeout(function () {--%>
                <%--window.location.href = "${pageContext.request.contextPath}/user/gotologin.do";--%>
            <%--}, 1000);--%>
        <%--} else {--%>
            <%--$.ajax({--%>
                <%--url: "${pageContext.request.contextPath}/product/updateCollect.do",--%>
                <%--type: "post",--%>
                <%--data: {--%>
                    <%--pid:pid--%>
                <%--},--%>
                <%--success: function (d) {--%>
                    <%--if (d.status == 1) {--%>
                        <%--prompt("正在前往登录", 900);--%>
                        <%--setTimeout(--%>
                            <%--function () {--%>
                                <%--window.location.href = "${pageContext.request.contextPath}/gotologin.do";--%>
                            <%--}, (1 * 1000));--%>
                    <%--}--%>
                    <%--if (d.status == 0) {--%>
                        <%--_this.toggleClass("btn-wish");--%>
                        <%--_this.toggleClass("btn-nowish");--%>
                        <%--if (d.data == 1) {--%>
                            <%--prompt("收藏商品成功", 800);--%>
                        <%--}--%>
                        <%--if (d.data == 0) {--%>
                            <%--prompt("已取消收藏", 900)--%>
                        <%--}--%>
                    <%--}--%>
                <%--}--%>
            <%--})--%>
        <%--}--%>
    <%--}--%>

    <%--function prompt(text, _time) {--%>
        <%--var windowWidth = $(window).width();--%>
        <%--var tipsDiv = '<div class="tipsClass">' + text + '</div>';--%>
        <%--$('body').append(tipsDiv);--%>
        <%--$('div.tipsClass').css({--%>
            <%--'top': 130 + 'px',--%>
            <%--'left': ( windowWidth / 2 ) - 350 / 2 + 'px',--%>
            <%--'position': 'fixed',--%>
            <%--'padding': '10px 16px',--%>
            <%--'background': '#7FFFD4',--%>
            <%--'font-size': 18 + 'px',--%>
            <%--'margin': '0 auto',--%>
            <%--'text-align': 'center',--%>
            <%--'width': '350px',--%>
            <%--'height': 'auto',--%>
            <%--'color': 'white',--%>
            <%--'opacity': '0.8'--%>
        <%--}).show();--%>
        <%--setTimeout(function () {--%>
            <%--$('div.tipsClass').fadeOut();--%>
        <%--}, _time);--%>
    <%--}--%>

<%--</script>--%>
</html>
